<template>
<div class="box">
    <div class="head">
        <div class="back">
            <el-button type="primary" size="mini" icon="el-icon-s-home" @click="back">返回</el-button>
            <el-button type="primary" size="mini" icon="el-icon-search" @click="handlePopup">导出</el-button>
            <el-button type="primary" size="mini" icon="el-icon-search" @click="openModal">筛选</el-button>
        </div>
    </div>

    <el-table :header-cell-style="{background:'#eee',color:'black'}" :height="tableHeight" size="mini" :data="tableData" style="width: 100%; border: 1px solid #ebebeb;box-shadow: 4px 4px 4px #efeeee;border-radius:6px">

        <el-table-column align="left" prop="businessName" label="企业名称" />
        <el-table-column align="left" prop="businessStandName" label="标准化企业名称" />
        <el-table-column align="left" prop="plate" label="所属板块" />
        <el-table-column align="left" prop="countryName" label="国家名称" />
        <el-table-column align="left" prop="provinceName" label="省份名称" />
        <el-table-column align="left" prop="cityName" label="城市名称" />
        <el-table-column align="left" prop="isInternal" label="境内/境外" />
        <el-table-column align="left" prop="establishDate" label="成立日期" />

        <el-table-column align="left" prop="applyNum" label="发明申请公开量" />
        <el-table-column align="left" prop="grantNum" label="发明授权量" />

        <el-table-column align="left" prop="utilityModeNum" label="实用新型量" />
        <el-table-column align="left" prop="designNum" label="外观设计量" />

        <el-table-column align="left" prop="effectiveInvNum" label="有效发明量" />
        <el-table-column align="left" prop="effectiveUtilityModeNum" label="有效实用新型量" />

        <el-table-column align="left" prop="effectiveDesignNum" label="有效外观设计量" />
        <el-table-column align="left" prop="currentYearApplyNum" label="本年度发明公开量" />

        <el-table-column align="left" prop="currentYearGrantNum" label="本年度发明授权量" />
        <el-table-column align="left" prop="currentYearUtilityModeNum" label="本年度实用新型量" />

        <el-table-column align="left" prop="currentYearDesignNum" label="本年度外观设计量" />

    </el-table>
    <div class="page">
        <el-pagination @current-change="currChange" :page-size="pageSize" align="end" background layout="prev, pager, next" :total="total" :current-page="index" />
    </div>

    <!-- 塞选 -->
    <el-dialog title="筛选" :visible.sync="dialogTableVisible" width="74%">
        <div>
            <el-form size="mini" ref="form" :model="form" label-width="120px">

                <el-row>
                    <el-col :span="8">
                        <el-form-item label="企业名称:">
                            <el-input placeholder="请输入企业名称" v-model="form.businessName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="标准化企业名称:">
                            <el-input placeholder="请输入标准化企业名称" v-model="form.businessStandName"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="8">
                        <el-form-item label="所属板块:">
                            <el-input placeholder="请输入所属板块" v-model="form.plate"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="国家名称:">
                            <el-input placeholder="请输入国家名称" v-model="form.countryName"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="8">
                        <el-form-item label="省份名称:">
                            <el-input placeholder="请输入省份名称" v-model="form.provinceName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="城市名称:">
                            <el-input placeholder="请输入城市名称" v-model="form.cityName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="境内/境外:">
                            <!-- <el-input placeholder="境内/境外" v-model="form.isInternal"></el-input> -->
                            <el-select v-model="form.isInternal" placeholder="请选择">
                                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>

                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="成立日期:">
                            <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="form.establishDate" style="width: 100%;"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="10">
                        <el-form-item label="发明申请公开量:">
                            <el-input-number @change="applyNumChange" v-model="form.applyNum1" :min="1"></el-input-number> 至
                            <el-input-number @change="applyNumChange" v-model="form.applyNum2" :min="1"></el-input-number>
                        </el-form-item>
                    </el-col>

                    <el-col :span="10">
                        <el-form-item label="发明授权量:">
                            <el-input-number @change="grantNumChange" v-model="form.grantNum1" :min="1"></el-input-number> 至
                            <el-input-number @change="grantNumChange" v-model="form.grantNum2" :min="1"></el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="10">
                        <el-form-item label="实用新型量:">
                            <el-input-number @change="utilityModeNumC" v-model="form.utilityModeNum1" :min="1"></el-input-number> 至
                            <el-input-number @change="utilityModeNumC" v-model="form.utilityModeNum2" :min="1"></el-input-number>
                        </el-form-item>
                    </el-col>

                    <el-col :span="10">
                        <el-form-item label="外观设计量:">
                            <el-input-number @change="designNumC" v-model="form.designNum1" :min="1"></el-input-number> 至
                            <el-input-number @change="designNumC" v-model="form.designNum2" :min="1"></el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="10">
                        <el-form-item label="有效发明量:">
                            <el-input-number @change="effectiveInvNumC" v-model="form.effectiveInvNum1" :min="1"></el-input-number> 至
                            <el-input-number @change="effectiveInvNumC" v-model="form.effectiveInvNum2" :min="1"></el-input-number>
                        </el-form-item>
                    </el-col>

                    <el-col :span="10">
                        <el-form-item label="有效实用新型量:">
                            <el-input-number @change="effectiveUtilityModeNumC" v-model="form.effectiveUtilityModeNum1" :min="1"></el-input-number> 至
                            <el-input-number @change="effectiveUtilityModeNumC" v-model="form.effectiveUtilityModeNum2" :min="1"></el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>

                <!-- effectiveDesignNum -->
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="有效外观设计量:">
                            <el-input-number @change="effectiveDesignNumC" v-model="form.effectiveDesignNum1" :min="1"></el-input-number> 至
                            <el-input-number @change="effectiveDesignNumC" v-model="form.effectiveDesignNum2" :min="1"></el-input-number>
                        </el-form-item>
                    </el-col>

                    <el-col :span="10">
                        <el-form-item label="本年度发明公开量:">
                            <el-input-number @change="currentYearApplyNumC" v-model="form.currentYearApplyNum1" :min="1"></el-input-number> 至
                            <el-input-number @change="currentYearApplyNumC" v-model="form.currentYearApplyNum2" :min="1"></el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>

                <!-- currentYearGrantNum -->
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="本年度发明授权量:">
                            <el-input-number @change="currentYearGrantNumC" v-model="form.currentYearGrantNum1" :min="1"></el-input-number> 至
                            <el-input-number @change="currentYearGrantNumC" v-model="form.currentYearGrantNum2" :min="1"></el-input-number>
                        </el-form-item>
                    </el-col>

                    <el-col :span="10">
                        <el-form-item label="本年度实用新型量:">
                            <el-input-number @change="currentYearUtilityModeNumC" v-model="form.currentYearUtilityModeNum1" :min="1"></el-input-number> 至
                            <el-input-number @change="currentYearUtilityModeNumC" v-model="form.currentYearUtilityModeNum2" :min="1"></el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>

                <!-- currentYearDesignNum -->

                <el-row>
                    <el-col :span="10">
                        <el-form-item label="本年度外观设计量:">
                            <el-input-number @change="currentYearDesignNumC" v-model="form.currentYearDesignNum1" :min="1"></el-input-number> 至
                            <el-input-number @change="currentYearDesignNumC" v-model="form.currentYearDesignNum2" :min="1"></el-input-number>
                        </el-form-item>
                    </el-col>

                </el-row>

                <!-- <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number> -->

                <!-- <el-form-item label="活动区域">
                    <el-select v-model="form.region" placeholder="请选择活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="活动时间">
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
                    </el-col>
                    <el-col class="line" :span="2">-</el-col>
                    <el-col :span="11">
                        <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="即时配送">
                    <el-switch v-model="form.delivery"></el-switch>
                </el-form-item>
                <el-form-item label="活动性质">
                    <el-checkbox-group v-model="form.type">
                        <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                        <el-checkbox label="地推活动" name="type"></el-checkbox>
                        <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                        <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="特殊资源">
                    <el-radio-group v-model="form.resource">
                        <el-radio label="线上品牌商赞助"></el-radio>
                        <el-radio label="线下场地免费"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="活动形式">
                    <el-input type="textarea" v-model="form.desc"></el-input>
                </el-form-item> -->
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">立即筛选</el-button>
                    <!-- <el-button>取消</el-button> -->
                </el-form-item>
            </el-form>

        </div>
    </el-dialog>

</div>
</template>

<script>
import {
    getStatisticsData,
    downloadStatisticsData1
} from '@/api/retrieval'

export default {
    data() {
        return {
            openDialog: false,
            tableHeight: window.innerHeight - 160,
            total: 0,
            pageSize: 20,
            index: 1,
            tableData: [],
            dialogTableVisible: false,
            form: {
                businessName: "",
                businessStandName: "",
                plate: "",
                countryName: "",
                provinceName: "",
                cityName: "",
                isInternal: ""
            },
            options: [{
                value: '境内',
                label: '境内'
            }, {
                value: '境外',
                label: '境外'
            }, ],

        }
    },
    mounted() {
        let data = {
            "pageNum": this.index,
            "pageSize": this.pageSize
        }
        window.onresize = () => {
            this.tableHeight = window.innerHeight - 160
        }
        getStatisticsData(data).then(res => {
            let {
                total,
                list
            } = res.data
            this.total = total
            this.tableData = this.formatList(list)

        })
    },
    methods: {
        applyNumChange(e) {

            if (this.form.applyNum1 && this.form.applyNum2) {
                if (this.form.applyNum2 < this.form.applyNum1) {
                    this.form.applyNum1 = e
                    this.form.applyNum2 = this.form.applyNum1

                }
            }
        },

        grantNumChange(e) {
            if (this.form.grantNum1 && this.form.grantNum2) {
                if (this.form.grantNum2 < this.form.grantNum1) {
                    this.form.grantNum1 = e
                    this.form.grantNum2 = this.form.grantNum1

                }
            }
        },

        utilityModeNumC(e) {
            if (this.form.utilityModeNum1 && this.form.utilityModeNum2) {
                if (this.form.utilityModeNum2 < this.form.utilityModeNum1) {
                    this.form.utilityModeNum1 = e
                    this.form.utilityModeNum2 = this.form.utilityModeNum1

                }
            }
        },

        designNumC(e) {
            if (this.form.designNum1 && this.form.designNum2) {
                if (this.form.designNum2 < this.form.designNum1) {
                    this.form.designNum1 = e
                    this.form.designNum2 = this.form.designNum1

                }
            }
        },

        effectiveInvNumC(e) {

            if (this.form.effectiveInvNum1 && this.form.effectiveInvNum2) {
                if (this.form.effectiveInvNum2 < this.form.effectiveInvNum1) {
                    this.form.effectiveInvNum1 = e
                    this.form.effectiveInvNum2 = this.form.effectiveInvNum1

                }
            }
        },

        effectiveUtilityModeNumC(e) {
            if (this.form.effectiveUtilityModeNum1 && this.form.effectiveUtilityModeNum2) {
                if (this.form.effectiveUtilityModeNum2 < this.form.effectiveUtilityModeNum1) {
                    this.form.effectiveUtilityModeNum1 = e
                    this.form.effectiveUtilityModeNum2 = this.form.effectiveUtilityModeNum1

                }
            }

        },

        effectiveDesignNumC(e) {

            if (this.form.effectiveDesignNum1 && this.form.effectiveDesignNum2) {
                if (this.form.effectiveDesignNum2 < this.form.effectiveDesignNum1) {
                    this.form.effectiveDesignNum1 = e
                    this.form.effectiveDesignNum2 = this.form.effectiveDesignNum1

                }
            }
        },

        currentYearApplyNumC(e) {
            if (this.form.currentYearApplyNum1 && this.form.currentYearApplyNum2) {
                if (this.form.currentYearApplyNum2 < this.form.currentYearApplyNum1) {
                    this.form.currentYearApplyNum1 = e
                    this.form.currentYearApplyNum2 = this.form.currentYearApplyNum1

                }
            }

        },

        currentYearGrantNumC(e) {
            if (this.form.currentYearGrantNum1 && this.form.currentYearGrantNum2) {
                if (this.form.currentYearGrantNum2 < this.form.currentYearGrantNum1) {
                    this.form.currentYearGrantNum1 = e
                    this.form.currentYearGrantNum2 = this.form.currentYearGrantNum1

                }
            }
        },

        currentYearUtilityModeNumC(e) {
            if (this.form.currentYearUtilityModeNum1 && this.form.currentYearUtilityModeNum2) {
                if (this.form.currentYearUtilityModeNum2 < this.form.currentYearUtilityModeNum1) {
                    this.form.currentYearUtilityModeNum1 = e
                    this.form.currentYearUtilityModeNum2 = this.form.currentYearUtilityModeNum1

                }
            }
        },

        currentYearDesignNumC(e) {
            if (this.form.currentYearDesignNum1 && this.form.currentYearDesignNum2) {
                if (this.form.currentYearDesignNum2 < this.form.currentYearDesignNum1) {
                    this.form.currentYearDesignNum1 = e
                    this.form.currentYearDesignNum2 = this.form.currentYearDesignNum1

                }
            }

        },

        openModal() {
            this.dialogTableVisible = true
        },
        currChange(index) {
            this.index = index
            let data = {
                "pageNum": this.index,
                "pageSize": this.pageSize
            }

            getStatisticsData(data).then(res => {
                let {
                    total,
                    list
                } = res.data
                this.total = total
                this.tableData = this.formatList(list)

            })
        },

        back() {
            this.$router.go(-1)
        },
        formatList(list) {
            let id = 0
            list.forEach(item => {
                id = id + 1
                item.id = id
            })
            return list
        },
        handlePopup() {
          downloadStatisticsData1().then(res => {

            const headers = res.headers
            let link = document.createElement("a");
            // 响应头获取编码的文件名称
            let filename = decodeURI(headers["content-disposition"].split(";")[1].split("=")[1])
            let blob;
            try {
              //该实例化的方式第一个参数必须是数组的格式
              blob = res.data;
            } catch (e) {
              //旧版本浏览器下的blob创建对象
              window.BlobBuilder = window.BlobBuilder ||
                window.WebKitBlobBuilder ||
                window.MozBlobBuilder ||
                window.MSBlobBuilder;
              if (e.name == 'TypeError' && window.BlobBuilder) {
                var blobbuilder = new BlobBuilder();
                BlobBuilder.append(data);
                blob = blobbuilder.getBlob('application/vnd.ms-excel,charset=utf-8');
              } else {
                alert("浏览器版本较低，暂不支持该文件类型下载");
              }
            }
            let url = window.URL.createObjectURL(blob);

            link.setAttribute("href", url)
            link.download = filename
            document.body.appendChild(link);
            link.click()
            document.body.removeChild(link);
          })
        },
        onSubmit() {
            this.form.applyNum = [this.form.applyNum1 ? this.form.applyNum1 : -1, this.form.applyNum2 ? this.form.applyNum2 : -1]

            this.form.grantNum = [this.form.grantNum1 ? this.form.grantNum1 : -1, this.form.grantNum2 ? this.form.grantNum2 : -1]

            this.form.utilityModeNum = [this.form.utilityModeNum1 ? this.form.utilityModeNum1 : -1, this.form.utilityModeNum2 ? this.form.utilityModeNum2 : -1]

            this.form.designNum = [this.form.designNum1 ? this.form.designNum1 : -1, this.form.designNum2 ? this.form.designNum2 : -1]

            this.form.effectiveInvNum = [this.form.effectiveInvNum1 ? this.form.effectiveInvNum1 : -1, this.form.effectiveInvNum2 ? this.form.effectiveInvNum2 : -1]
            //    <el-table-column align="left" prop="effectiveInvNum" label="有效发明量" />
            // <el-table-column align="left" prop="effectiveUtilityModeNum" label="有效实用新型量" />

            this.form.effectiveUtilityModeNum = [this.form.effectiveUtilityModeNum1 ? this.form.effectiveUtilityModeNum1 : -1, this.form.effectiveUtilityModeNum2 ? this.form.effectiveUtilityModeNum2 : -1]

            this.form.effectiveDesignNum = [this.form.effectiveDesignNum1 ? this.form.effectiveDesignNum1 : -1, this.form.effectiveDesignNum2 ? this.form.effectiveDesignNum2 : -1]

            // <el-table-column align="left" prop="effectiveDesignNum" label="有效外观设计量" />

            this.form.currentYearApplyNum = [this.form.currentYearApplyNum1 ? this.form.currentYearApplyNum1 : -1, this.form.currentYearApplyNum2 ? this.form.currentYearApplyNum2 : -1]

            // <el-table-column align="left" prop="currentYearApplyNum" label="本年度发明公开量" />

            this.form.currentYearGrantNum = [this.form.currentYearGrantNum1 ? this.form.currentYearGrantNum1 : -1, this.form.currentYearGrantNum2 ? this.form.currentYearGrantNum2 : -1]

            // <el-table-column align="left" prop="currentYearGrantNum" label="本年度发明授权量" />

            this.form.currentYearUtilityModeNum = [this.form.currentYearUtilityModeNum1 ? this.form.currentYearUtilityModeNum1 : -1, this.form.currentYearUtilityModeNum2 ? this.form.currentYearUtilityModeNum2 : -1]
            // <el-table-column align="left" prop="currentYearUtilityModeNum" label="2121年实用新型量" />
            this.form.currentYearDesignNum = [this.form.currentYearDesignNum1 ? this.form.currentYearDesignNum1 : -1, this.form.currentYearDesignNum2 ? this.form.currentYearDesignNum2 : -1]

            // <el-table-column align="left" prop="currentYearDesignNum" label="本年度外观设计量" />
            this.form.pageNum=this.index,
            this.form.pageSize=this.pageSize
                  getStatisticsData(this.form).then(res => {
                let {
                    total,
                    list
                } = res.data
                this.total = total
                this.tableData = this.formatList(list)

            })

        }
    }
}
</script>

<style lang="scss" scoped>
.box {
    padding: 28px;
    padding-top: 0px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #f9f9f9;

    .head {
        height: 44px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        .back {
            // height: 100%;
            // width: 130px;
            // background-color: #ebebeb;
        }
    }

    .page {
        border: 1px solid #ebebeb;
        margin-top: 8px;
        border-radius: 6px;
        background-color: #ffffff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 42px;
        box-shadow: 4px 4px 4px #efeeee;
    }
}
</style>
